<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单维护列表</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/v2.6.10/vue.min.js"></script>
		<script src="js/v2.6.10/elementui.js"></script>
		<script src="js/v2.6.10/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 搜索框 -->
			<el-row>
				<el-col :span="6"><el-input style="display:inline" v-model="search"
						placeholder="请输入搜索内容"></el-input></el-col>
				&nbsp;
				<el-button @click="searchMeaasge" icon="el-icon-search" type="primary">搜索</el-button>
			</el-row>
			<!-- 展示数据表格 -->
			<el-table :data="tableData" border style="width: 100%" size="mini">
				<el-table-column prop="label" label="菜单名字" width="180">
				</el-table-column>
				<el-table-column prop="href" label="菜单地址" width="180">
				</el-table-column>
				<el-table-column prop="imgIcon" label="小图标" width="180">
				</el-table-column>
				<el-table-column label="操作">
					<template slot="header" slot-scope="scope">
						<el-button type="primary" plain size="mini" @click="add(scope.$index, scope.row)">新增</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" type="success" plain @click="up(scope.$index, scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 增加菜单对话框 -->
			<el-dialog title="增加菜单" :visible.sync="dialogFormVisibleAdd">
				<el-form :model="formAdd">
					<el-form-item label="菜单标题" label-width="80px">
						<el-input v-model="formAdd.label" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜单地址" label-width="80px">
						<el-input v-model="formAdd.href" autocomplete="off"></el-input>
					</el-form-item>
					<!-- 循环展示图标 -->
					<el-form-item label="菜单图标" label-width="80px">
						<i :class="formAdd.imgIcon"></i>
						<el-select v-model="formAdd.imgIcon" placeholder="请选择图标">
							<el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
								<i :class="item"></i>
								{{item}}
							</el-option>
						</el-select>
					</el-form-item>
					<!-- 用级联选择器展示所属父级 -->
					<el-form-item label="所属父级" label-width="80px">
						<el-cascader :props="parentidProps" v-model="formAdd.parentId" :options="parentidOptions"
							:show-all-levels="false"></el-cascader>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 编辑菜单对话框 -->
			<el-dialog title="编辑菜单" :visible.sync="dialogFormVisibleUp">
				<el-form :model="formUp">
					<el-form-item label="菜单标题" label-width="80px">
						<el-input v-model="formUp.label" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜单地址" label-width="80px">
						<el-input v-model="formUp.href" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜单图标" label-width="80px">
						<i :class="formUp.imgIcon"></i>
						<el-select v-model="formUp.imgIcon" placeholder="请选择图标">
							<el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
								<i :class="item"></i>
								{{item}}
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属父级" label-width="80px">
						<el-cascader :props="parentidProps" v-model="formUp.parentId" :options="parentidOptions"
							:show-all-levels="false"></el-cascader>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleUp = false">取 消</el-button>
					<el-button type="primary" @click="upsubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				imgiconoptions: ['el-icon-eleme', 'el-icon-user', 'el-icon-user', 'el-icon-help',
					'el-icon-picture-outline-round', 'el-icon-s-opportunity'
				], // 小图标数组
				tableData: [], // 表格数据
				search: "", // 搜索
				dialogFormVisibleAdd: false, // 控制增加 dialog显示与隐藏
				formAdd: { // 增加菜单的 form
					label: "",
					href: "",
					imgIcon: "",
					parentId: 0,
				},
				parentidOptions: [], // 级联选择器的数据[父级菜单集合数据]
				parentidProps: { // 配置父级菜单的 cascader
					value: "id",
					emitPath: false,
					checkStrictly: true
				},
				dialogFormVisibleUp: false, // 控制修改的对话框
				formUp: { // 修改菜单的form
					id: 0,
					label: "",
					href: "",
					imgIcon: "",
					parentId: 0,
				}
			},
			methods: {
				// 搜索按钮
				searchMeaasge() {
					if (this.search == "") {
						this.$message({
							showClose: true,
							message: '你还没有输入任何搜索内容',
							type: 'warning'
						});
					}
					this.initTableData();
				},
				// 编辑按钮
				up(index, row) {
					this.selectAllMenu();
					// 根据id获取修改的对象
					let that = this;
					// 获取所有的父级菜单集合
					axios.get(API + "selectMenuById/" + row.id)
						.then(function(res) {
							console.log(res.data.data);
							let menu = res.data.data.menu;
							that.formUp = menu; // 回填数据
						}).catch(err => {
							console.log(err);
						});

					this.dialogFormVisibleUp = true;
					console.log(index, row);
				},
				// 修改提交按钮
				upsubmit() {
					console.log(this.formUp);
					// 调用编辑接口
					axios.post(API + "updateMenu",
						this.formUp
					).then((result) => {
						//alert(result.data);
						this.$alert(result.data, '消息提示', {
							confirmButtonText: '确定',
							callback: action => {}
						});
						// 编辑成功后,清空输入框
						this.formUp = {
							id: "",
							label: "",
							href: "",
							imgIcon: "",
							parentId: ""
						};
						this.dialogFormVisibleUp = false;
						this.initTableData();
					})
				},
				// 新增提交按钮
				addsubmit() {
					console.log(this.formAdd);
					// 非空判断
					if (this.formAdd.label == "") {
						this.$message({
							showClose: true,
							message: '警告哦，菜单标题不能为空!',
							type: 'warning'
						});
						return false;
					} else if (this.formAdd.parentId == "") {
						this.$message({
							showClose: true,
							message: '警告哦，父级id不能为空!',
							type: 'warning'
						});
					}else{
					// 都不为空时,调用新增接口
					// 调用新增接口
					axios.post(API + "insertMenu",
						this.formAdd
					).then((result) => {
						//alert(result.data);
						this.$alert(result.data, '消息提示', {
							confirmButtonText: '确定',
							callback: action => {}
						});
						// 新增成功后,清空输入框
						this.formAdd = {
							label: "",
							href: "",
							imgIcon: "",
							parentId: ""
						};
						this.dialogFormVisibleAdd = false;
						this.initTableData();
					})
					}
				},
				// 新增
				add() {
					this.selectAllMenu();
					//	2.打开新增对话框
					this.dialogFormVisibleAdd = true;
				},
				// 获取所有的menu数据,填充父级菜单下拉列表
				selectAllMenu() {
					let that = this;
					// 获取所有的父级菜单集合
					axios.get(API + "selectMenu")
						.then(function(res) {
							//console.log(res.data.data.menuList);
							let arrs = arrayToTree(res.data.data.menuList);
							that.parentidOptions = arrs;
						}).catch(err => {
							console.log(err);
						});
				},
				// 初始化表格数据[查询菜单列表]
				initTableData() {
					let that = this;
					axios.get(API + "selectMenu", {
						params: {
							label: this.search
						}
					}).then(function(res) {
						console.log(res.data.data.menuList);
						that.tableData = res.data.data.menuList;
					}).catch(err => {
						console.log(err);
					});
				}
			},
			mounted() {
				this.initTableData();
			}
		})
	</script>
</html>